import React, { Component, Fragment } from "react";
import "./lesson.scss";
import { message} from 'antd';
import Liitem from "./liitem"
let tips = ({text,type}) => {
  message.destroy();
  let types = {
    "success":"success",
    "warning":"warning",
    "error":"error",
    "info":"info"
  }
  let styletype = types[type]||"info";
  message[styletype](text);
}
class classOne extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue:'' , // input中的值
      list:["头疼"]    //服务列表
    };
  }
  addList(e){
    let val = this.state.inputValue;
    if(!val.length){
      tips({text:"请输入!"})
      return 
    } 
    this.setState({
      list:[...this.state.list,this.state.inputValue],
      inputValue:""
    })
    tips({text:"添加成功!",type:"success"})
    console.log(this.state.list)  
  }

  inputChange(e){
      this.setState({
          inputValue:e.target.value
      })
  }
  detel(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
    tips({text:"删除成功!",type:"success"})
  }

  render() {
    return (
      <Fragment>
        <div>
          <div className="titlecon">欢乐谷</div>
          <div className="maintool">
            <label htmlFor="evan" className="labelcon">加入服务：</label>
            <input id="evan" value={this.state.inputValue} onChange={this.inputChange.bind(this)} className="mainInput"/> 
            <button onClick={this.addList.bind(this)}> 增加服务 </button>
          </div>
        </div>
        <ul>
          {/* {
              this.state.list.length?this.state.list.map((item, index) => {
              return <li key={`item`+index} onClick={this.detel.bind(this,index)} className="lineli">{item}</li>
             }):(<li>暂无数据</li>)
          } */}
          {
              this.state.list.length?this.state.list.map((item, index) => {
                 return <Liitem content={item} key={index+item} index={index}
                 avname="前端小菜鸡"
                 deleteItem={this.detel.bind(this)}
                 ></Liitem>
              }):"暂无数据"
             
          }
        </ul>
      </Fragment>
    );
  }
}

export default classOne;
